<template>
    <div>
        <!-- 表头 -->
        <div style="width: 100%">
            <div class="Head">
                <!-- 货品信息 -->
                <div style="font-weight: 800"><span style="margin-right: 10px">运单信息</span></div>
                <div class="Cusname">
                    <span style="margin-right: 10px"><span style="color: red">*</span>送货方式</span>
                    <span>
                        <el-select v-model="adi.method" placeholder="请选择操作类型">
                            <el-option v-for="item in options" :key="item.method" :label="item.label" :value="item.method"></el-option>
                        </el-select>
                    </span>
                </div>
                <!-- 货架名称 -->
                <div class="Cusname">
                    <span style="margin-right: 10px"><span style="color: red">*</span>出货时间</span>
                    <span>
                        <el-date-picker v-model="adi.arrive" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
                    </span>
                </div>
                <div class="Cusname">
                    <span style="margin-right: 10px"><span style="color: red">*</span>客户订单号</span>
                    <span>
                        <el-input v-model="adi.cOrder" placeholder="请输入名称"></el-input>
                    </span>
                </div>
                <div class="Cusname">
                    <span style="margin-right: 10px"><span style="color: red">*</span>订单来源</span>
                    <span>
                        <el-select v-model="adi.source" placeholder="请选择仓库">
                            <el-option v-for="item in option" :key="item.source" :label="item.label" :value="item.source"></el-option>
                        </el-select>
                    </span>
                </div>
                <div class="Cusname">
                    <span style="margin-right: 10px"><span style="color: red">*</span>备注</span>
                    <span>
                        <el-input v-model="adi.plate" placeholder="请输入名称"></el-input>
                    </span>
                </div>
                <div class="Cusname">
                    <span style="margin-right: 10px"><span style="color: red">*</span>快递单号</span>
                    <span>
                        <el-input v-model="adi.express" placeholder="请输入名称"></el-input>
                    </span>
                </div>
                <div class="Cusname">
                    <span style="margin-right: 10px"><span style="color: red">*</span>收货人</span>
                    <span>
                        <el-select v-model="adi.sId" placeholder="请选择仓库">
                            <el-option v-for="item in ck" :key="item.sId" :label="item.name" :value="item.sId"></el-option>
                        </el-select>
                    </span>
                </div>
                <div class="Cusname">
                    <el-button type="primary" style="margin-top: 10px" @click="addlist()" v-if="stu">新增运单</el-button>
                </div>
            </div>
            <!-- 表头 -->
            <div class="Head2">
                <!-- 增加货品 -->
                <div style="font-weight: 800; width: 100%; float: left"><span style="margin-right: 10px">货品清单</span></div>
                <div class="Cusname" style="width: 100%">
                    <el-button type="primary" style="margin-top: 10px" @click="addLists()">添加商品</el-button>
                </div>
            </div>
        </div>
        <el-table :data="tableData" class="content" :cell-style="rowClass" :header-cell-style="headClass">
                <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
            <el-table-column prop="product.number" label="货品编号"></el-table-column>
            <el-table-column prop="product.name" label="货品名称"></el-table-column>
            <el-table-column prop="stock" label="订单数量"></el-table-column>
            <el-table-column prop="contacts" label="单位"></el-table-column>
            <el-table-column label="规格"></el-table-column>
            <el-table-column label="条码"></el-table-column>
            <el-table-column prop="status" label="品牌"></el-table-column>
            <el-table-column prop="status" label="批次号"></el-table-column>
            <el-table-column prop="status" label="保质期"></el-table-column>
            <el-table-column label="操作" width="250px">
                <template>
                    <el-button type="text" size="small" class="el-icon-edit">修改数量</el-button>
                    <el-button type="text" size="small" class="el-icon-edit">修改日期</el-button>
                    <el-button type="text" size="small" class="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                background
                style="float: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
        <!-- 添加仓库弹框 -->
        <el-dialog title="添加仓库" :visible.sync="dialogVisible" width="55%" :before-close="handleClose" class="adframe">
            <!-- 客户类别 -->
            <div class="Cusgory">
                <span style="margin-right: 10px">货品名称</span>
                <el-input v-model="adi2.name" placeholder="请输入货品名称"></el-input>
            </div>
            <div class="But">
                <el-button type="primary" icon="el-icon-search" @click="serchs()">搜索</el-button>
                <el-button icon="el-icon-refresh">重置</el-button>
            </div>

            <el-table
                ref="multipleTable"
                :data="tableDatass"
                tooltip-effect="dark"
                style="width: 100%"
                class="content"
                :cell-style="rowClass"
                :header-cell-style="headClass"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection"> </el-table-column>
                <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
                <el-table-column prop="name" label="货品名称"></el-table-column>
                <el-table-column prop="sku" label="sku"></el-table-column>
                <el-table-column prop="address" label="库存数量"> </el-table-column>
                <el-table-column prop="address" label="可用库存"> </el-table-column>
                <el-table-column prop="address" label="商品描述"> </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="block">
                <el-pagination
                    background
                    style="float: right"
                    @size-change="handleSizeChanges"
                    @current-change="handleCurrentChanges"
                    :current-page="pages.pageNum"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="pages.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totals"
                >
                </el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dw">取 消</el-button>
                <el-button type="primary" @click="addli()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { listorder, listConsigneeinformation, listcustomer, exad, comhp, orderads } from '../../api/user.js';
export default {
    data() {
        return {
            stu: true,
            ck: [],
            tableData: [],
            tableDatass: [],
            // 添加框
            dialogVisible: false,
            dialogTableVisible: false,
            // 分页
            page: {
                pageSize: 10,
                pageNum: 1
            },
            //  分页
            pages: {
                pageSize: 10,
                pageNum: 1,
                oId: 0,
                category: 0
            },
            // 添加输入框
            adi: {},
            adi2: {},
            options: [
                {
                    method: '0',
                    label: '汽车'
                },
                {
                    method: '1',
                    label: '船运'
                },
                {
                    method: '3',
                    label: '火车'
                },
                {
                    method: '4',
                    label: '自提'
                },
                {
                    method: '5',
                    label: '专车'
                },
                {
                    method: '6',
                    label: '零坦'
                },
                {
                    method: '7',
                    label: '快递'
                }
            ],
            // 订单来源
            option: [
                {
                    source: 0,
                    label: '淘宝'
                },
                {
                    source: 1,
                    label: '拼多多'
                }
            ],
            obj: {},
            total: null,
            totals: null,
            multipleTable: []
        };
    },
    methods: {
        // 表头显示
        Display() {
            this.Head = !this.Head;
        },
        // 表头样式设置
        headClass() {
            return 'text-align: center;background:#F8F8F9;color:#515A6D;';
        },
        // 表格样式设置
        rowClass() {
            return 'text-align: center;';
        },
        // 分页点击
        indexMethod(index) {
            return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = Number(val);
            console.log(`每页 ${val} 条`);
            this.Rean();
        },
        handleCurrentChange(val) {
            this.page.pageNum = Number(val);
            console.log(`当前页: ${val}`);
            this.Rean();
        },
        handleSizeChanges(val) {
            this.pages.pageSize = Number(val);
            console.log(`每页 ${val} 条`);
            this.reans();
        },
        handleCurrentChanges(val) {
            this.pages.pageNum = Number(val);
            console.log(`当前页: ${val}`);
            this.reans();
        },
        // 表格渲染
        Rean() {
            listorder(this.page).then((a) => {
                this.tableData = a.rows;
                this.total = a.total;
            });
        },
        rean() {
            listConsigneeinformation(this.sId).then((res) => {
                this.ck = res.rows;
                console.log(res.rows);
            });
        },
        reans() {
            comhp(this.page).then((res) => {
                this.tableDatass = res.rows;
                this.totals = res.total;
            });
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            for (let i = 0; i < this.multipleSelection.length; i++) {
                this.adi2.category = this.multipleSelection[i].category;
                this.adi2.stock = this.multipleSelection[i].stock;
            }
        },
        //   添加弹框
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },
        dw() {
            this.dialogVisible = false;
        },
        //新增按钮
        addLists() {
            this.dialogVisible = true;
            this.Dialogtitle = '添加仓库';
            this.conVar = 0;
        },
        // 添加内框
        Choice(index) {
            this.adi.belongName = index.name;
            this.adi.cId = index.cId;
            this.dialogTableVisible = false;
        },
        // 新增运单
        addlist() {
            exad(this.adi).then((res) => {
                console.log(res);
                this.stu = false;
                this.adi2.oId = res.oId;
                this.obj.oId = res.oId;
            });
        },
        // 添加商品
        async addli() {
            for (let i = 0; i < this.multipleSelection.length; i++) {
                this.adi2.pId = this.multipleSelection[i].pId;
                await orderads(this.adi2).then((res) => {
                    this.dialogVisible = false;
                    this.serchs();
                    this.tableDatass = res.rows;
                    console.log(res);
                });
            }
        },
        // 搜索
        serchs() {
            comhp(this.pages).then((res) => {
                console.log(res);
                this.tableDatass = res.rows;
                this.totals = res.total;
            });
        },
        jump() {
            if (this.$route.query.val) {
                this.adi = this.$route.query.val;
                this.obj.oId = this.$route.query.val.id;
                if (this.obj.oId) {
                    this.stu = false;
                } else {
                    this.stu = true;
                }
            }
        }
    },
    watch: {
        $route() {
            this.jump();
        }
    },
    mounted() {
        this.rean();
        this.reans();
        this.jump();
    }
};
</script>

<style scoped>
.Head {
    height: 80px;
}
.Head2 {
    height: 80px;
    margin-top: 20px;
}
/* 客户类别 */
.Cusgory {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusgory span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
/* 客户名称 */
.Cusname {
    height: 100%;
    float: left;
    margin-right: 10px;
}
.Cusname span {
    display: block;
    height: 100%;
    line-height: 50px;
    font-weight: 800;
    color: #606266;
    float: left;
}
.But {
    margin-top: 10px;
    float: left;
}
</style>